<template>
  <el-container style="height:100%;">
    <el-header>{{$t('model.module')}}</el-header>
    <el-container>
      <el-aside class="tempo-left-panel">
        <v-tree />
      </el-aside>
      <el-main class="tempo-main-panel">
        <v-grid />
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import tree from "./view/Tree";
import grid from "./view/Grid";
export default {
  components: {
    "v-grid": grid,
    "v-tree": tree
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  mounted() {

  },
  methods: {
  },
  data() {
    return {
    };
  }
};
</script>
<style scoped>
.el-header {
  line-height: 60px;
  text-align: start;
  background-color: #ccc;
}
.el-aside {
  display: flex;
}
.box-card {
  height: calc(100% - 2px);
}
.clearfix {
  text-align: start;
}
.btn {
  float: right;
  padding: 3px 0;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.custom-tree-node i {
  margin-left: 10px;
}
.tempo-left-panel {
  width: 250px !important;
  height: calc(100% - 40px);
  border: 1px solid #ddd;
  float: left;
 margin: 20px 10px 20px 20px
}
.tempo-main-panel {
  height:  calc(100% - 40px);
  padding: 20px 20px 20px 10px 
}
</style>
